<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="static/js/jquery.min.js"></script>
        <script src="static/js/echarts.min.js"></script>
        <script src="static/js/incubator-echarts-4.9.0/map/js/china.js"></script>
        <script src="static/js/incubator-echarts-4.9.0/map/json/china-cities.json"></script>
        <script src="static/js/incubator-echarts-4.9.0/map/json/china-contour.json"></script>
        <script src="static/js/echarts-wordcloud-master/dist/echarts-wordcloud.min.js"></script>
    </head>
    <body>
        <div id="bar" style="width:600px; height:200px;"></div>
        <div id="pie" style="width: 600px;height: 200px"></div>
        <div id="myMap" style="width: 600px;height: 600px"></div>
        <div id="word" style="width: 600px;height: 600px"></div>
        <script>
            var myBar = echarts.init(document.getElementById('bar'));
            // 显示标题，图例和空的坐标轴

            myBar.setOption({
                //先将图表模板加载出来
                title: {
                    text: '异步数据加载示例'
                },
                tooltip: {
                    trigger: "axis"
                },
                yAxis: [{
                    type:"value",
                    name:"销量",
                    min:50,
                    max:200,
                    interval:25,
                    axisLabel:{
                        formatter:"{value}件"
                    }
                },
                        {
                    type: "value",
                    name: "价格",
                    min:25,
                    max:100,
                    interval:25,
                    axisLabel: {
                        formatter: "{value}元"
                    }
                }],
                dataZoom: [{
                    start: 80,
                    type: "inside"
                  }, {
                    start: 80
                  }],
                legend: {
                    data:['销量',"热度"]
                },
                xAxis: {
                    data: [],
                    axisPointer:{
                        type:"shadow"
                    }
                },
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: []
                },{
                    name: "热度",
                    type: "line",
                    data: [],
                    yAxisIndex:1,
                    smooth:true //设置折线图为平滑
                }]
            });
            $(function () {
                setInterval(bar, 5000)

                // 异步加载数据
                function bar() {
                    $.get('http://127.0.0.1:5000/ran').done(function (data) {
                        // 填入数据

                        myBar.setOption({
                            xAxis: {
                                data: data.title
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '销量',
                                data: data.barData
                            }, {
                                name: "热度",
                                data: data.lineData
                            }]
                        });
                    });
                }
            })
        </script>
        <script>
            var myPie = echarts.init(document.getElementById("pie"))
            myPie.setOption({
                title: {
                    text:"广州平均房价"
                },
                tooltip: {
                    show:true,
                    trigger: 'item'
                    //formatter:'{b}:{d}% <br/> {c}'
                },
                legend: {
                    orient:'vertical',
                    top:"0%",
                    left:"80%",
                    data:[]
                },
                series:[
                    {
                        name:"广州房价",
                        type:"pie",
                        radius:"75%",
                        center:['50%', '60%'],
                        data:[]
                    }
                ]

            });
            $(function () {
                setInterval(pie,5000)

                function pie() {
                    $.get("http://127.0.0.1:5000/pie/random").done(function (data) {
                        myPie.setOption({
                            legend:{
                                data:data.title
                            },
                            series:[{
                                name:"广州房价",
                                data:data.dataPie
                            }]
                        })

                    })
                }

            })
        </script>
        <script>
            //地图
            var myMap = echarts.init(document.getElementById("myMap"))

            myMap.setOption({
                title: {
                    text: '中国房价',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    type: 'piecewise',
                    pieces: [
                        {min: 500, max: 1500, label: '价格正常1'},
                        {min: 1501, max: 2500, label: '价格偏高'},
                        {min: 2501, max: 4000, label: '价格高'},
                        {min: 4000,label: "奢侈"}
                    ]
                },
                roamController: {
                    show: true,
                    left: 'right',
                    mapTypeControl: {
                        'china': true
                    }
                },
                series: [
                    {
                        name: '价格',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                            show: true
                        },
                        data: []
                    }
                ]
            });
                    $(function () {
                        setInterval(chian_up,5000)
                        function chian_up() {
                            $.get('http://127.0.0.1:5000/index/map').done(function (result_data) {
                                myMap.setOption({
                                    series: {
                                        name:"价格",
                                        data:result_data.mapData
                                    }
                                })
                            })}
                    })
        </script>
        <script>
            var myWork = echarts.init(document.getElementById('word'));
            myWork.setOption({
                title:{
                    text:"词云图"
                },
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400,
                    drawOutOfBound: true,
                    textStyle: {
                        normal: {
                            color: function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: [
                    ]
                } ]
            });

            $(function () {
                setInterval(workerCount,5000)

                function workerCount() {
                    $.get("http://127.0.0.1:5000/work").done(function (result_data) {
                        myWork.setOption({
                            series:{
                                data:result_data.workData
                            }
                        })

                    })
                }

            }
            );
        window.onresize = myWork.resize;
        </script>
    </body>
</html>